Die Eigenschaft, dass das Untermenü angezeigt wird, wenn man mit der Maus über den übergeordneten Menüpunkt hovert, ist dem Menü auf Position 1 vorbehalten, kann aber mit einer kleinen Änderung der effects.js auch auf andere Positionen ausgeweitet werden. Diese Änderung müsste nach jedem Update des Templates wiederholt werden.
Die Änderungen betreffen die Zeilen 2-26:
github.com/Bakual/Allrounder/blob/master...js/effects.js#L2-L26
Code:
// Mobile dropdown menu
$('ul.menu.meinMenu li a').prepend('<span class="mobile-icon"></span>');
$('ul.menu.meinMenu li a .mobile-icon').click(
function(e){
e.preventDefault();
$(this).closest('li').toggleClass('opened').find('ul:first');
$('ul.menu.meinMenu li').not('.opened').find('ul').hide();
$('ul.menu.meinMenu li.opened > ul').show('fast');
}
);
$('ul.menu.meinMenu ul').hide();
// Dropdown menu
$('ul.menu.meinMenu').find('li').hover(
function(){
if ($('.navbar .btn-navbar').css('display') == 'none') {
$(this).find('ul:first').show('fast');
}
},
function(){
if ($('.navbar .btn-navbar').css('display') == 'none') {
$(this).find('ul:first').hide();
}
}
);
Wenn du den Code so ersetzt, wie beschrieben und dem Menü-Modul dann im Tab Erweitert unter Menüklassensuffix " meinMenu" (Leerzeichen am Anfang beachten!!) zuweist, sollte es funktionieren. Des Weiteren müssen alle Menüeinträge, die irgendwann mal sichtbar werden sollen, von Anfang an im HTML-Code vorhanden sein. Deshalb musst du bei Untermenüeinträge anzeigen ja wählen.
Wenn du die mobile Ansicht aktiviert hast, solltest du noch folgenden Code in der /css/custom.css oder in der /less/custom.less ergänzen (dieser bleibt bei einem Update unverändert. Nach jeder Änderung dieser Datei muss der Template-Stil neu gespeichert werden, damit die Änderungen wirksam werden): (Der Code entfernt auch noch das einrücken der Menüeinträge beim Hovern)
Code:
ul.menu.meinMenu {
li a {
padding-left: 0px;
}
@media (max-width: @navbarCollapseWidth) {
li .mobile-icon {
display: inline-block;
width: 1.5em;
font-size: 1.1em;
}
li.parent > a > .mobile-icon {
&:before {
text-align: center;
content: "+";
color: green;
}
}
li.parent.opened > {
a > .mobile-icon:before {
content: "\2013";
color: red;
}
ul.nav-child {
display: block;
}
}
}
}
